<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>开发主题 | 赵小云学习笔记</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/logo.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <script data-ad-client="ca-pub-2245427233262012" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <meta name="description" content="愿半生编码，如一生好友。">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/assets/css/0.styles.fca152ce.css" as="style"><link rel="preload" href="/assets/js/app.28715422.js" as="script"><link rel="preload" href="/assets/js/5.cdfc0b9f.js" as="script"><link rel="preload" href="/assets/js/43.3d77a131.js" as="script"><link rel="preload" href="/assets/js/9.4c44b987.js" as="script"><link rel="prefetch" href="/assets/js/10.84acbb53.js"><link rel="prefetch" href="/assets/js/11.702efeb3.js"><link rel="prefetch" href="/assets/js/12.589fb250.js"><link rel="prefetch" href="/assets/js/13.5b7e8614.js"><link rel="prefetch" href="/assets/js/14.a954bfd1.js"><link rel="prefetch" href="/assets/js/15.bd11c63a.js"><link rel="prefetch" href="/assets/js/16.b4fb7988.js"><link rel="prefetch" href="/assets/js/17.61d84266.js"><link rel="prefetch" href="/assets/js/18.24a2bff9.js"><link rel="prefetch" href="/assets/js/19.43d31d8f.js"><link rel="prefetch" href="/assets/js/20.b22f54d0.js"><link rel="prefetch" href="/assets/js/21.9c07bc91.js"><link rel="prefetch" href="/assets/js/22.32e1eb60.js"><link rel="prefetch" href="/assets/js/23.093427d3.js"><link rel="prefetch" href="/assets/js/24.e648d309.js"><link rel="prefetch" href="/assets/js/25.d7282ca4.js"><link rel="prefetch" href="/assets/js/26.35acf93d.js"><link rel="prefetch" href="/assets/js/27.56ca4ce1.js"><link rel="prefetch" href="/assets/js/28.93379c82.js"><link rel="prefetch" href="/assets/js/29.51d63262.js"><link rel="prefetch" href="/assets/js/30.1b336946.js"><link rel="prefetch" href="/assets/js/31.e297de45.js"><link rel="prefetch" href="/assets/js/32.4bae9555.js"><link rel="prefetch" href="/assets/js/33.4239fd2e.js"><link rel="prefetch" href="/assets/js/34.bbc16b3c.js"><link rel="prefetch" href="/assets/js/35.f16977ac.js"><link rel="prefetch" href="/assets/js/36.6141cdc8.js"><link rel="prefetch" href="/assets/js/37.43f5a7f6.js"><link rel="prefetch" href="/assets/js/38.01c53507.js"><link rel="prefetch" href="/assets/js/39.21f63708.js"><link rel="prefetch" href="/assets/js/40.f9f38954.js"><link rel="prefetch" href="/assets/js/41.0175e1f4.js"><link rel="prefetch" href="/assets/js/42.422cba18.js"><link rel="prefetch" href="/assets/js/44.aab84de2.js"><link rel="prefetch" href="/assets/js/45.ac7ca1c5.js"><link rel="prefetch" href="/assets/js/46.9982952d.js"><link rel="prefetch" href="/assets/js/47.d4c85adf.js"><link rel="prefetch" href="/assets/js/48.d00a7fe9.js"><link rel="prefetch" href="/assets/js/49.03487062.js"><link rel="prefetch" href="/assets/js/50.bbfd00cd.js"><link rel="prefetch" href="/assets/js/51.1ef38ba0.js"><link rel="prefetch" href="/assets/js/52.f352c22a.js"><link rel="prefetch" href="/assets/js/53.fa377a7b.js"><link rel="prefetch" href="/assets/js/54.16d81c63.js"><link rel="prefetch" href="/assets/js/55.b2e1b9f2.js"><link rel="prefetch" href="/assets/js/56.99f69695.js"><link rel="prefetch" href="/assets/js/57.54be906e.js"><link rel="prefetch" href="/assets/js/58.e28944e4.js"><link rel="prefetch" href="/assets/js/59.647fcd7b.js"><link rel="prefetch" href="/assets/js/6.8f67e34e.js"><link rel="prefetch" href="/assets/js/60.ed875cf2.js"><link rel="prefetch" href="/assets/js/61.d244e754.js"><link rel="prefetch" href="/assets/js/62.82572383.js"><link rel="prefetch" href="/assets/js/63.afac6e14.js"><link rel="prefetch" href="/assets/js/64.1793ed0c.js"><link rel="prefetch" href="/assets/js/65.75847d31.js"><link rel="prefetch" href="/assets/js/66.a613f673.js"><link rel="prefetch" href="/assets/js/67.374e7e54.js"><link rel="prefetch" href="/assets/js/7.2df5fd3a.js"><link rel="prefetch" href="/assets/js/8.79c44677.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.b3708bf9.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.3b4fa92d.js"><link rel="prefetch" href="/assets/js/vendors~notification.11c6c6d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.fca152ce.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">赵小云学习笔记</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/notes/" class="nav-link router-link-active">
  notes
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/config/" class="nav-link">
  配置
</a></div><div class="nav-item"><a href="/plugin/" class="nav-link">
  插件
</a></div><div class="nav-item"><a href="/theme/" class="nav-link">
  主题
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="了解更多" class="dropdown-title"><span class="title">了解更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span class="title">了解更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          API
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
  CLI
</a></li><li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
  Node
</a></li></ul></li><li class="dropdown-item"><h4>
          开发指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html" class="nav-link">
  本地开发
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html" class="nav-link">
  设计理念
</a></li><li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
  FAQ
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html" class="nav-link">
  术语
</a></li></ul></li><li class="dropdown-item"><h4>
          其他
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html" class="nav-link">
  从 0.x 迁移
</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/notes/" class="nav-link router-link-active">
  notes
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/config/" class="nav-link">
  配置
</a></div><div class="nav-item"><a href="/plugin/" class="nav-link">
  插件
</a></div><div class="nav-item"><a href="/theme/" class="nav-link">
  主题
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="了解更多" class="dropdown-title"><span class="title">了解更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span class="title">了解更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          API
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
  CLI
</a></li><li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
  Node
</a></li></ul></li><li class="dropdown-item"><h4>
          开发指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html" class="nav-link">
  本地开发
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html" class="nav-link">
  设计理念
</a></li><li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
  FAQ
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html" class="nav-link">
  术语
</a></li></ul></li><li class="dropdown-item"><h4>
          其他
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html" class="nav-link">
  从 0.x 迁移
</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>职场故事</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notes/" aria-current="page" class="sidebar-link">主题</a></li><li><a href="/notes/程序员和数学.html" class="sidebar-link">pwa</a></li><li><a href="/notes/using-a-theme.html" class="sidebar-link">使用主题</a></li><li><a href="/notes/writing-a-theme.html" aria-current="page" class="active sidebar-link">开发主题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#获取渲染内容" class="sidebar-link">获取渲染内容</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#内容摘抄" class="sidebar-link">内容摘抄</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#目录结构" class="sidebar-link">目录结构</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#布局组件" class="sidebar-link">布局组件</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#使用插件" class="sidebar-link">使用插件</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#网站和页面的元数据" class="sidebar-link">网站和页面的元数据</a></li><li class="sidebar-sub-header"><a href="/notes/writing-a-theme.html#应用配置" class="sidebar-link">应用配置</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="开发主题"><a href="#开发主题" class="header-anchor">#</a> 开发主题</h1> <p>想要书写一个主题，首先在你文档根目录创建一个 <code>.vuepress/theme</code> 目录，接着创建一个 <code>Layout.vue</code> 文件：</p> <pre class="vue-container"><code><p>.
└─ .vuepress
 └─ <code>theme</code>
     └─ Layout.vue</p>
</code></pre><p>到这里，就像开发一个普通的 Vue 应用一样。如何组织你的主题，这完全取决于你。</p> <h2 id="获取渲染内容"><a href="#获取渲染内容" class="header-anchor">#</a> 获取渲染内容</h2> <p>当前的 <code>.md</code> 文件渲染的内容，可以作为一个独特的全局组件 <code>&lt;Content/&gt;</code> 来使用，你可能想要它显示在页面中的某个地方。一个最简单的主题，可以是一个唯一的 <code>Layout.vue</code> 组件，并包含以下内容：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>theme-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Content</span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>更多请阅读:</strong></p> <ul><li><a href="/guide/markdown-slot.html">Markdown 插槽</a></li></ul> <h2 id="内容摘抄"><a href="#内容摘抄" class="header-anchor">#</a> 内容摘抄</h2> <p>如果一个 markdown 文件中有一个 <code>&lt;!-- more --&gt;</code> 注释，则该注释之前的内容会被抓取并暴露在 <code>$page.excerpt</code> 属性中。如果你在开发一个博客主题，你可以用这个属性来渲染一个带摘抄的文章列表。</p> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <p>随着需求的变化，只有一个布局组件 <code>Layout.vue</code> 可能还不够，你可能想要定义更多的布局组件用于不同的页面，你可能还想要自定义一个<a href="/config/#palette-styl">调色板</a>，甚至应用一些插件。</p> <p>那么是时候重新组织你的主题了！一个约定的主题的目录结构如下：</p> <pre class="vue-container"><code><p>theme
├── <code>global-components</code>
│   └── xxx.vue
├── <code>components</code>
│   └── xxx.vue
├── <code>layouts</code>
│   ├── Layout.vue <em>(<strong>必要的</strong>)</em>
│   └── 404.vue
├── <code>styles</code>
│   ├── index.styl
│   └── palette.styl
├── <code>templates</code>
│   ├── dev.html
│   └── ssr.html
├── <code>index.js</code>
├── <code>enhanceApp.js</code>
└── package.json</p>
</code></pre><ul><li><code>theme/global-components</code>: 该目录下的组件都会被自动注册为全局组件。想了解更多，请参考 <a href="https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components" target="_blank" rel="noopener noreferrer">@vuepress/plugin-register-components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</li> <li><code>theme/components</code>: Vue 组件。</li> <li><code>theme/layouts</code>: 布局组件，其中  <code>Layout.vue</code> 是必需的。</li> <li><code>theme/styles</code>: 全局的样式和调色板。</li> <li><code>theme/templates</code>: 修改默认的模板文件。</li> <li><code>theme/index.js</code>: 主题文件的入口文件。</li> <li><code>theme/enhanceApp.js</code>: 主题水平的客户端增强文件。</li></ul> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>当你将你的主题以一个 npm 包的形式发布时，如果你没有任何主题配置，即没有 <code>theme/index.js</code>，那么你需要将 <code>package.json</code> 中的 <code>&quot;main&quot;</code> 字段设置为 <code>layouts/Layout.vue</code>，只有这样 VuePress 才能正确地解析主题。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;layouts/Layout.vue&quot;</span><span class="token punctuation">,</span>
  ...
<span class="token punctuation">}</span>
</code></pre></div></div> <h2 id="布局组件"><a href="#布局组件" class="header-anchor">#</a> 布局组件</h2> <p>假设你的主题 <code>layouts</code> 目录如下：</p> <pre class="vue-container"><code><p>theme
└── <code>layouts</code>
   ├── Layout.vue
   ├── AnotherLayout.vue
   └── 404.vue</p>
</code></pre><p>然后，所有的页面将会默认使用 <code>Layout.vue</code> 作为布局组件，对于那些匹配不到的路由将会使用 <code>404.vue</code>。</p> <p>如果你想要在某一个页面中使用 <code>AnotherLayout.vue</code> 作为布局组件，那么你只需要更新这个页面的 <code>frontmatter</code>：</p> <div class="language-markdown extra-class"><pre class="language-markdown"><code><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token font-matter yaml language-yaml"><span class="token key atrule">layout</span><span class="token punctuation">:</span> AnotherLayout</span>
<span class="token punctuation">---</span></span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>每个 layout 组件都可能会渲染出截然不同的页面，如果你想设置一些全局的 UI（如全局的 <code>&lt;header&gt;</code>），可以考虑使用 <a href="/notes/option-api.html#globallayout">globalLayout</a>。</p></div> <h2 id="使用插件"><a href="#使用插件" class="header-anchor">#</a> 使用插件</h2> <p>你可以通过主题的配置文件 <code>themePath/index.js</code> 来给主题应用一些插件：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/theme/index.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@vuepress/pwa'</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      serviceWorker<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      updatePopup<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="网站和页面的元数据"><a href="#网站和页面的元数据" class="header-anchor">#</a> 网站和页面的元数据</h2> <p><code>Layout</code> 组件将会对每一个文档目录下的 <code>.md</code> 执行一次，同时，整个网站以及特定页面的元数据将分别暴露为 <code>this.$site</code> 和 <code>this.$page</code> 属性，它们将会被注入到每一个当前应用的组件中。</p> <p>这是你现在看到的这个网站的 <code>$site</code> 的值：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;VuePress&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Vue 驱动的静态网站生成器&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;base&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;lastUpdated&quot;</span><span class="token operator">:</span> <span class="token number">1524027677000</span><span class="token punctuation">,</span>
      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;VuePress&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;frontmatter&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    ...
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>title</code>, <code>description</code> 和 <code>base</code> 会从 <code>.vuepress/config.js</code> 中对应的的字段复制过来，而 <code>pages</code> 是一个包含了每个页面元数据对象的数据，包括它的路径、页面标题（明确地通过 <a href="/guide/markdown.html#front-matter">YAML front matter</a> 指定，或者通过该页面的第一个标题取到），以及所有源文件中的 <code>YAML front matter</code> 的数据。</p> <p>下面的这个对象是你正在看的这个页面的 <code>$page</code> 的值：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;lastUpdated&quot;</span><span class="token operator">:</span> <span class="token number">1524847549000</span><span class="token punctuation">,</span>
  <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/custom-themes.html&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;自定义主题&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;headers&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token comment">/* ... */</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;frontmatter&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果用户在 <code>.vuepress/config.js</code> 配置了 <code>themeConfig</code>，你将可以通过 <code>$site.themeConfig</code> 访问到它。如此一来，你可以通过它来对用户开放一些自定义主题的配置 —— 比如指定目录或者页面的顺序，你也可以结合 <code>$site.pages</code> 来动态地构建导航链接。</p> <p>最后，别忘了，作为 Vue Router API 的一部分，<code>this.$route</code> 和 <code>this.$router</code> 同样可以使用。</p> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p><code>lastUpdated</code> 是这个文件最后一次 git 提交的 UNIX 时间戳，更多细节请参考：<a href="/notes/default-theme-config.html#最后更新时间">最后更新时间</a>。</p></div> <p><strong>参考:</strong></p> <ul><li><a href="/guide/global-computed.html">全局计算属性</a>.</li></ul> <h2 id="应用配置"><a href="#应用配置" class="header-anchor">#</a> 应用配置</h2> <p>自定义主题也可以通过主题根目录下的 <code>enhanceApp.js</code> 文件来对 VuePress 应用进行拓展配置。这个文件应当 <code>export default</code> 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  Vue<span class="token punctuation">,</span> <span class="token comment">// VuePress 正在使用的 Vue 构造函数</span>
  options<span class="token punctuation">,</span> <span class="token comment">// 附加到根实例的一些选项</span>
  router<span class="token punctuation">,</span> <span class="token comment">// 当前应用的路由实例</span>
  siteData <span class="token comment">// 站点元数据</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...做一些其他的应用级别的优化</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/vuejs/vuepress/edit/master/packages/docs/docs/notes/writing-a-theme.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/1/23 下午1:08:04</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/notes/using-a-theme.html" class="prev">
        使用主题
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.28715422.js" defer></script><script src="/assets/js/5.cdfc0b9f.js" defer></script><script src="/assets/js/43.3d77a131.js" defer></script><script src="/assets/js/9.4c44b987.js" defer></script>
  </body>
</html>
